/**
 * Created by huotaol on 2017/5/19.
 */
import React, {Component} from "react";
import PropTypes from "prop-types";
import {ListView, ScrollView, TextInput, TouchableWithoutFeedback, View} from "react-native";
import CustomStyle from "../../../common/style/CustomStyle";
import ModuleCommonHeader from "../../main/module/ModuleCommonHeader";
import NextButton from "../../main/record/common/NextButton";
import {Actions} from "react-native-router-flux";
import CommonTextItemNew from "../../main/record/common/CommonTextItemNew";
import InputTextItem from "../../main/record/common/InputTextItem";
import SingleSelectionTextItem from "../../main/record/common/SingleSelectionTextItem";
import SwitchTextItem from "../../main/record/common/SwitchTextItem";
import Util from "../../main/Util";
import * as StorageConstant from "../../constant/Storage";
import Modal from "react-native-modal";
import AreaSelect from "../AreaSelect";
import {connect} from "react-redux";
import {setLoadingState} from "../../redux/action/homePage.js";

const TYPE_LEFT = 'left';
const TYPE_RIGHT = 'right';

const DATA_SOURCE = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
const status_list = [
    {name: '正常', value: 0},
    {name: '变形', value: 1},
    {name: '扭曲', value: 2},
    {name: '更换', value: 3},
    {name: '烧焊', value: 4},
    {name: '褶皱', value: 5},];

class RecordDetail extends Component {

    static propTypes = {
        refresh: PropTypes.func,
    };
    // 构造
    constructor(props) {
        super(props);
        const data = this.props.data ? this.props.data : Util.recordDetailsSimple();

        // 初始状态
        this.state = {
            isModalVisible: false,
            carInfo: {...data},
        };
        this._renderRow = this._renderRow.bind(this);
        this._saveData = this._saveData.bind(this);
    }

    componentDidMount() {
    }

    render() {
        console.log('RecordDetail  ' + JSON.stringify(this.state.carInfo));
        return (
            <View style={{flex: 1}}>
                <ModuleCommonHeader title={'基本信息'}/>
                <ScrollView>
                    <CommonTextItemNew object={this.state.carInfo.location}
                                       onClickedListener={() => {
                                           this.setState({isModalVisible: true});
                                       }}
                    />
                    <InputTextItem object={this.state.carInfo.phone}
                                   autoCapitalize='characters'
                                   keyboardType={'numeric'} maxLength={11} minLength={11}

                    />
                    <CommonTextItemNew object={this.state.carInfo.brand}
                                       onClickedListener={() => {
                                           Actions.CarBrandSelection(
                                               {
                                                   onSelectedBrandListener: this._onBrandSelected.bind(this),
                                                   onSelectedSeriesListener: this._onSeriesSelected.bind(this),
                                                   onSelectedModelListener: this._onModelSelected.bind(this),
                                               }
                                           );
                                       }}
                    />
                    <InputTextItem object={this.state.carInfo.series}
                                   autoCapitalize='characters'

                    />
                    <InputTextItem object={this.state.carInfo.kind}
                                   autoCapitalize='characters'
                    />
                    <InputTextItem object={this.state.carInfo.vin} autoCapitalize='characters'
                                   keyboardType='default' maxLength={17} minLength={17}
                    />
                    <InputTextItem object={this.state.carInfo.carNumber} autoCapitalize={'characters'}
                                   keyboardType={'default'} maxLength={7} minLength={7}
                    />
                    <InputTextItem
                        object={this.state.carInfo.meter} autoCapitalize={'characters'}
                        keyboardType={'numeric'} maxLength={19}
                    />
                    <SingleSelectionTextItem object={this.state.carInfo.color}
                                             optionArray={[{name: "黑色"}, {name: "白色"}, {name: "红色"}, {name: "黄色"}, {name: "蓝色"}, {name: "绿色"}, {name: "紫色"}, {name: "银灰"}, {name: "深色"}, {name: "香槟色"}, {name: "棕色"}, {name: "其它"}]}/>
                    <SingleSelectionTextItem object={this.state.carInfo.leftAColumn}
                                             optionArray={status_list}
                    />
                    <SingleSelectionTextItem object={this.state.carInfo.leftBColumn}
                                             optionArray={status_list}
                    />
                    <SingleSelectionTextItem object={this.state.carInfo.leftCColumn}
                                             optionArray={status_list}
                    />
                    <SingleSelectionTextItem object={this.state.carInfo.rightAColumn}
                                             optionArray={status_list}
                    />
                    <SingleSelectionTextItem object={this.state.carInfo.rightBColumn}
                                             optionArray={status_list}
                    />
                    <SingleSelectionTextItem object={this.state.carInfo.rightCColumn}
                                             optionArray={status_list}
                    />
                    <SingleSelectionTextItem object={this.state.carInfo.leftCarling}
                                             optionArray={status_list}
                    />
                    <SingleSelectionTextItem object={this.state.carInfo.rightCarling}
                                             optionArray={status_list}
                    />
                    <SingleSelectionTextItem object={this.state.carInfo.leftFontHang}
                                             optionArray={status_list}
                    />
                    <SingleSelectionTextItem object={this.state.carInfo.rightFontHang}
                                             optionArray={status_list}
                    />
                    <SingleSelectionTextItem object={this.state.carInfo.leftBackHang}
                                             optionArray={status_list}
                    />
                    <SingleSelectionTextItem object={this.state.carInfo.rightBackHang}
                                             optionArray={status_list}
                    />
                    <SwitchTextItem object={this.state.carInfo.engineScrew}
                                    onValue='是' offValue='否'/>
                    <SwitchTextItem object={this.state.carInfo.fire}
                                    onValue='是' offValue='否'/>
                    <SwitchTextItem object={this.state.carInfo.water}
                                    onValue='是' offValue='否'/>
                    <SingleSelectionTextItem object={this.state.carInfo.descriptionSel}
                                             optionArray={[
                                                 {name: '好', value: 0},
                                                 {name: '较好', value: 1},
                                                 {name: '一般', value: 2},
                                                 {name: '较差', value: 3},
                                                 {name: '差', value: 4}]}
                    />
                    <View style={{
                        paddingLeft: CustomStyle.getActualSizeInHorizontal(40),
                        paddingRight: CustomStyle.getActualSizeInHorizontal(40),
                    }}>
                        <TextInput
                            placeholder={'车况描述'}
                            underlineColorAndroid={'#00000000'}
                            style={{fontSize: CustomStyle.getActualFontSize(30), color: '#333'}}
                        />
                    </View>
                    <CommonTextItemNew object={this.state.carInfo.leftImage}
                                       reRenderText={value => {
                                           const viewString = Util.decodePhotoStringToViewString(value);
                                           return [viewString, viewString !== '正常'];
                                       }}
                                       onClickedListener={() => {
                                           this._enterPhoto(this.state.carInfo.leftImage.value, TYPE_LEFT);
                                       }}
                    />
                    <CommonTextItemNew object={this.state.carInfo.rightImage}
                                       reRenderText={value => {
                                           const viewString = Util.decodePhotoStringToViewString(value);
                                           return [viewString, viewString !== '正常'];
                                       }}
                                       onClickedListener={() => {
                                           this._enterPhoto(this.state.carInfo.rightImage.value, TYPE_RIGHT);
                                       }}
                    />
                </ScrollView>

                <NextButton onClickedListener={() => {
                    console.log('------------------------  ' + JSON.stringify(this.state.carInfo));
                    let data = Object.assign({}, this.state.carInfo, {lastUpdateTime: Util.getTimeString(new Date())});
                    this._saveData(data);
                }}/>
                <TouchableWithoutFeedback onPress={() => {
                    this.setState({isModalVisible: false});
                }}>
                    <Modal isVisible={this.state.isModalVisible}
                           backdropOpacity={0.65}
                           style={{
                               justifyContent: 'flex-end',
                               margin: 0,
                           }}
                    >
                        <AreaSelect
                            selectArea={this.state.selectArea}
                            onPress={(area) => {
                                const loc = Object.assign({}, this.state.carInfo.location, {
                                    value: area.name,
                                    id: area.id
                                });
                                this.setState({
                                    isModalVisible: false,
                                    carInfo: {...this.state.carInfo, location: loc}
                                });
                            }}/>
                    </Modal>
                </TouchableWithoutFeedback>
            </View>
        );
    }

    _renderRow(item) {
    }

    _onBrandSelected(value) {
        console.log('_onBrandSelected  ' + value);
        this.setState({brand: Object.assign(this.state.carInfo.brand, {value})});
    }

    _onSeriesSelected(value) {
        console.log('_onSeriesSelected ' + value);
        this.setState({series: Object.assign(this.state.carInfo.series, {value})});
    }

    _onModelSelected(value) {
        console.log('_onModelSelected ' + value);
        this.setState({kind: Object.assign(this.state.carInfo.kind, {value})});
    }

    // 结果回调，接收的结果value, 另外一个index是用来传递一下点击了哪个
    _onPhotoResult(value, type) {
        console.log(`_onPhotoResult  ${value}`);
        if (type === TYPE_LEFT) {
            const leftImage = Object.assign({}, this.state.carInfo.leftImage, {value: value});
            this.setState({carInfo: Object.assign({}, this.state.carInfo, {leftImage: leftImage})});
        } else if (type === TYPE_RIGHT) {
            const rightImage = Object.assign({}, this.state.carInfo.rightImage, {value: value});
            this.setState({carInfo: {...this.state.carInfo, ...{rightImage}}});
        }
    }

    _saveData(data) {
        console.log('-----------_saveData---------------------- ' + JSON.stringify(data));
        this.props.setLoading(true, '数据保存中');
        Util.saveData(StorageConstant.STORAGE_RECORD_SIMPLE, data, () => {
            this.props.setLoading(false, '');
            Actions.pop();
            this.props.refresh();
        });
    }

    _enterPhoto(item, type) {
        Actions.CommonPhotoSelection(
            {
                optionString: item,
                onResultListener: (value) => this._onPhotoResult(value, type)
            }
        );
    }
}

const mapStateToProps = (state) => {
    return {};
};

const mapDispatchToProps = (dispatch) => {
    return {
        setLoading: (loading, text) => {
            dispatch(setLoadingState(loading, text));
        },
    };
};
export default connect(mapStateToProps, mapDispatchToProps)(RecordDetail);